<template>
	<view class="page-main">
		<image class="index-bg" src="../../static/seat/bg.png"></image>
		<scroll-view scroll-y class="scroll-box">
			<view class="seat-box">
				<view class="float-box">
					<view class="float-title">4楼借阅自习室</view>
					<view class="content">
						<text>今天</text>
						<text class="span32">9月10日</text>
						<text class="span22">7:30-10:30</text>
					</view>
				</view>

				<view class="top-bg">
					<view class="mini-box">
						<view class="small-box">
							<view class="small-item" v-for="item in 18" :key='item'></view>
						</view>
						<view class="small-box">
							<view class="small-item" v-for="item in 18" :key='item'></view>
						</view>
					</view>
				</view>

				<view class="top-center-bg">
					<view class="seat-box" v-for="(item, index) in topList" :key="index">
						<view class="aisle"></view>
						<view class="image-box" v-for="(e, i) in item" @click="check(index, i, 'top')" :key="i">
							<block v-if="i % 2 == 0">
								<view class="seat-index">{{ e.seatNumber }}</view>
								<image class="seat-image" :src="getImage(e)"></image>
							</block>
							<block v-else>
								<image class="seat-image-reversal" :src="getImage(e)"></image>
								<view class="seat-index-reversal">{{ e.seatNumber }}</view>
							</block>
						</view>
					</view>
				</view>

				<view class="center-bg">
					<view class="mini-box">
						<view class="small-box">
							<view class="small-item" v-for="item in 24" :key='item'></view>
							<view class="small-text">书架</view>
						</view>
						<view class="small-center">过道</view>
						<view class="small-box">
							<view class="small-item" v-for="item in 24" :key='item'></view>
							<view class="small-text">书架</view>
						</view>
					</view>
				</view>

				<view class="top-center-bg">
					<view class="seat-box" v-for="(item, index) in bottomList" :key="index">
						<view class="aisle"></view>
						<view class="image-box" v-for="(e, i) in item" @click="check(index, i, 'bottom')" :key="i">
							<block v-if="i % 2 == 0">
								<view class="seat-index">{{ e.seatNumber }}</view>
								<image class="seat-image" :src="getImage(e)"></image>
							</block>
							<block v-else>
								<image class="seat-image-reversal" :src="getImage(e)"></image>
								<view class="seat-index-reversal">{{ e.seatNumber }}</view>
							</block>
						</view>
					</view>
				</view>

				<view class="top-bg" style="padding-bottom: 130rpx">
					<view class="mini-box">
						<view class="small-box">
							<view class="small-item" v-for="item in 18" :key='item'></view>
						</view>
						<view class="small-box">
							<view class="small-item" v-for="item in 18" :key='item'></view>
						</view>
					</view>
				</view>



				<!-- <view class="seat-box">
					<view class="aisle"></view>
					<view class="image-box" v-for="item in 6">
						<block v-if='item % 2 == 0'>
							<view class="seat-index">{{ item }}</view>
							<image class="seat-image" src="../../static/seat/white-seat.png"></image>
						</block>
						<block v-else>
							<image class="seat-image-reversal" src="../../static/seat/white-seat.png"></image>
							<view class="seat-index-reversal">{{ item }}</view>
						</block>
					</view>
				</view> -->
			</view>
		</scroll-view>
		<view class="bottom-box">
			<image class="bottom-bg" src="../../static/seat/bottom-bg.png"></image>
			<view class="bottom-item-box">
				<view class="item">
					<image src="../../static/seat/white-seat.png"></image>
					空闲
				</view>
				<view class="item">
					<image src="../../static/seat/blue-seat.png"></image>
					已选
				</view>
				<view class="item">
					<image src="../../static/seat/cyan-seat.png"></image>
					已预约
				</view>
				<view class="item">
					<image src="../../static/seat/red-seat.png"></image>
					有人
				</view>
			</view>
			<view class="bottom-button" @click="open">确认选座</view>
		</view>
		<!-- <uni-popup type="center" ref="popup" :isMaskClick="false">
			<view class="popup-box">
				<view class="popup-title">预约确认</view>
				<image class="popup-image" src="../../static/seat/popup-image.png"></image>
				<view class="popup-content-box">
					<view class="popup-content-title">您的预约信息如下：</view>
					<view class="popup-content-item">
						预约图书馆：
						<span>积石堂图书馆</span>
					</view>
					<view class="popup-content-item">
						预约图书馆：
						<span>4楼借阅自习室</span>
					</view>
					<view class="popup-content-item">
						预约时间段：
						<span>{{checkTimeArr[0]}}-{{checkTimeArr[1]}}</span>
					</view>
					<view class="popup-content-item">
						预约座位号：
						<span>{{checkArr[0].seatNumber}}号座位</span>
					</view>
				</view>
				<view class="popup-bottom-box">
					<view class="popup-left" @click="close">取消</view>
					<view class="popup-right" @click="saveData">确认</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		props: {
			//上方每个桌子的座位数
			seatTop: {
				type: Number,
				default: 6
			},
			//上方的桌子数
			deskTop: {
				type: Number,
				default: 6
			},
			//下方每个桌子的座位数
			seatBottom: {
				type: Number,
				default: 6
			},
			//下方的桌子数
			deskBottom: {
				type: Number,
				default: 6
			},
			//可以选择的座位数
			selects: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				dayList: [],
				intoId: '',
				checkTimeArr: [],
				scrollData: {},
				topList: [],
				bottomList: [],
				checkArr: [],
			};
		},
		mounted(option) {
			this.topList = this.generateArray(this.deskTop, this.seatTop, 0);
			this.bottomList = this.generateArray(this.deskBottom, this.seatBottom, this.seatTop * this.deskTop);
			// this.checkTimeArr = JSON.parse(option.checkTimeArr)
		},
		onPageScroll(e) {
			this.scrollData = e;
		},
		methods: {
			generateArray(groups, seatsPerGroup, number) {
				let result = [];
				for (let i = 0; i < groups; i++) {
					let tempArray = [];
					for (let j = 1; j <= seatsPerGroup / 2; j++) {
						// 因为每次循环都生成了"regular"和"reversal"两种座位，所以总数应该除以2
						let seatNumber = i * seatsPerGroup + j + number;
						tempArray.push({
							seatNumber: seatNumber,
							seatType: Math.floor(Math.random() * 3) + 1,
						});
						tempArray.push({
							seatNumber: seatNumber + seatsPerGroup / 2, // 所有后半部分的座位号都比前半部分增加了seatsPerGroup/2
							seatType: Math.floor(Math.random() * 3) + 1,
						});
					}
					result.push(tempArray);
				}
				return result;
			},
			getImage(item) {
				//1空闲 2已选 3已预约 4有人
				let itemData = {
					1: require('../../static/seat/white-seat.png'),
					4: require('../../static/seat/blue-seat.png'),
					3: require('../../static/seat/cyan-seat.png'),
					2: require('../../static/seat/red-seat.png'),
				};
				
				return itemData[item.seatType] || require('../../static/seat/white-seat.png');
			},
			check(index, i, type) {
				if (type == 'top') {
					if (this.topList[index][i].seatType == 2 || this.topList[index][i].seatType == 3) return uni
						.showToast({
							title: '该座位已有人',
							icon: 'none'
						});
					if (this.topList[index][i].seatType == 4) return this.topList[index][i].seatType = 1
					if (this.selects > 1) {
						this.mapBookSeat()
						if (this.checkArr.length == this.selects) {
							return uni.showToast({
								title: '最多只能选择' + this.selects + "人",
								icon: 'none'
							});
						} else {
							this.topList[index][i].seatType = 4;
						}
					}
					if (this.selects == 1) {
						this.topList = this.resetArr(this.topList);
						this.topList[index][i].seatType = 4;
					}
					if (this.selects == 0) {
						uni.showToast({
							title: '当前不允许选择任何座位',
							icon: 'none'
						});
					}
					if (this.selects == -1) {
						this.topList[index][i].seatType = 4;
					}
				} else {
					if (this.bottomList[index][i].seatType == 2 || this.bottomList[index][i].seatType == 3) return uni
						.showToast({
							title: '该座位已有人',
							icon: 'none'
						});
					if (this.bottomList[index][i].seatType == 4) return this.bottomList[index][i].seatType = 1
					if (this.selects > 1) {
						this.mapBookSeat()
						if (this.checkArr.length == this.selects) {
							return uni.showToast({
								title: '最多只能选择' + this.selects + "人",
								icon: 'none'
							});
						} else {
							this.bottomList[index][i].seatType = 4;
						}
					}
					if (this.selects == 1) {
						this.bottomList = this.resetArr(this.bottomList);
						this.bottomList[index][i].seatType = 4;
					}
					if (this.selects == 0) {
						uni.showToast({
							title: '当前不允许选择任何座位',
							icon: 'none'
						});
					}
					if (this.selects == -1) {
						this.bottomList[index][i].seatType = 4;
					}
				}
			},
			//重置数组
			resetArr(arr) {
				arr.forEach(element => {
					element.forEach(e => {
						e.seatType = e.seatType == 4 ? 1 : e.seatType;
					});
				});
				return arr;
			},
			//遍历是否选了座位了，选了哪一个
			mapBookSeat() {
				this.checkArr = [];
				this.topList.forEach(element => {
					element.forEach(e => {
						if (e.seatType == 4) {
							this.checkArr.push(e);
						}
					});
				});
				this.bottomList.forEach(element => {
					element.forEach(e => {
						if (e.seatType == 4) {
							this.checkArr.push(e);
						}
					});
				});
			},
			saveData() {
				uni.showToast({
					title: '预约成功'
				});
				this.close();
			},
			open() {
				this.mapBookSeat()
				if (this.checkArr.length == 0) return uni.showToast({
					title: '请选择座位',
					icon: 'none'
				});
				this.$emit('change',this.checkArr)
				console.log(this.checkArr)
				// this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},

		},
	};
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 640rpx;
		background: #ffffff linear-gradient(180deg, #f8fbfd 0%, rgba(255, 255, 255, 0.5) 100%);
		box-shadow: 0rpx 4rpx 12rpx 0rpx #97c8dc, inset 0rpx 6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 0rpx -6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset -6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
		border-radius: 24rpx;
		border-image: linear-gradient(180deg, rgba(211, 241, 255, 1), rgba(145, 200, 226, 1)) 2 2;
		backdrop-filter: blur(6px);
		box-sizing: border-box;
		overflow: hidden;

		.popup-title {
			width: 100%;
			height: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #02151e;
			line-height: 32rpx;
			margin: 52rpx auto 40rpx;
			text-align: center;
		}

		.popup-image {
			width: 544rpx;
			height: 314rpx;
			display: flex;
			margin: 0 auto;
		}

		.popup-content-box {
			margin: 0 48rpx;

			.popup-content-title {
				margin: 44rpx 0 32rpx 0;
				font-size: 36rpx;
				font-weight: 500;
				color: #004362;
			}

			.popup-content-item {
				height: 28rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #5e9cba;
				line-height: 28rpx;
				margin: 20rpx 0;

				span {
					color: #004362;
				}
			}
		}

		.popup-bottom-box {
			height: 110rpx;
			border-top: 2rpx solid rgba(2, 21, 30, 0.06);
			width: 100%;
			display: flex;
			margin-top: 32rpx;

			.popup-left {
				width: 50%;
				height: 110rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #7f9ba8;
				line-height: 110rpx;
				border-right: 0.5rpx solid rgba(2, 21, 30, 0.06);
				text-align: center;
				box-sizing: border-box;
			}

			.popup-right {
				width: 50%;
				height: 110rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #04496a;
				line-height: 110rpx;
				border-left: 0.5rpx solid rgba(2, 21, 30, 0.06);
				text-align: center;
				box-sizing: border-box;
			}
		}
	}

	.mini-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: YouSheBiaoTiYuan !important;
	}

	.small-center {
		width: 18rpx;
		writing-mode: vertical-lr;
		letter-spacing: 16rpx;
		font-size: 20rpx;
		font-family: YouSheBiaoTiYuan;
		color: #004362;
		line-height: 26rpx;
	}

	.small-box {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(4, 1fr);
		grid-column-gap: 4rpx;
		grid-row-gap: 4rpx;
		width: 308rpx;
		position: relative;

		.small-item {
			width: 48rpx;
			height: 32rpx;
			background: #5690ab;
			box-sizing: border-box;
			border: 4rpx solid #3982a5;
		}

		.small-text {
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 26rpx;
			font-size: 20rpx;
			font-family: YouSheBiaoTiYuan;
			color: #004362;
			font-size: 500;
			line-height: 26rpx;
			-webkit-text-stroke: 0.5rpx #ffffff;
			text-stroke: 0.5rpx #ffffff;
		}
	}

	.page-main {
		height: 100vh;

		.scroll-box {
			height: calc(100vh - 88px - env(safe-area-inset-bottom));
			padding-bottom: env(safe-area-inset-bottom);
			background: linear-gradient(180deg, rgba(35, 110, 118, 0.25) 0%, rgba(21, 99, 112, 0.2) 100%);
		}

		.bottom-box {
			position: fixed;
			width: 750rpx;
			height: 316rpx;
			bottom: 0;
			// background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 100%);
			// box-shadow: 0rpx 4rpx 12rpx 0rpx #97c8dc, inset 0rpx 6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 0rpx -6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset -6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
			// border-radius: 24rpx;
			// overflow: hidden;
			// border-image: linear-gradient(180deg, rgba(211, 241, 255, 1), rgba(145, 200, 226, 1)) 2 2;
			backdrop-filter: blur(6px);

			// box-sizing: border-box;
			.bottom-bg {
				width: 750rpx;
				height: 316rpx;
				z-index: -1;
				position: absolute;
			}

			.bottom-item-box {
				display: flex;
				justify-content: space-between;
				margin: 50rpx 75rpx 58rpx;

				.item {
					height: 30rpx;
					font-size: 28rpx;
					color: #004362;
					line-height: 30rpx;
					display: flex;

					image {
						width: 32rpx;
						height: 30rpx;
						margin-right: 16rpx;
					}
				}
			}

			.bottom-button {
				width: 686rpx;
				height: 96rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 96rpx;
				border-radius: 64rpx;
				background: linear-gradient(90deg, #91d9e7 0%, #3982a4 100%);
				text-align: center;
				margin: 0 auto;
			}
		}

		.seat-box {
			width: 100%;
			height: 100%;
			position: relative;

			.float-box {
				width: 686rpx;
				height: 130rpx;
				margin: 16rpx 32rpx;
				background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx #97c8dc, inset 0rpx 6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 0rpx -6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset -6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
				border-radius: 24rpx;
				overflow: hidden;
				border-image: linear-gradient(180deg, rgba(211, 241, 255, 1), rgba(145, 200, 226, 1)) 2 2;
				backdrop-filter: blur(6px);
				box-sizing: border-box;
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				z-index: 1;
				font-family: YouSheBiaoTiYuan !important;

				.float-title {
					height: 36rpx;
					font-size: 28rpx;
					font-family: YouSheBiaoTiYuan;
					color: #004362;
					line-height: 36rpx;
					margin: 14rpx 32rpx 16rpx;
				}

				.content {
					height: 36rpx;
					font-size: 28rpx;
					font-family: YouSheBiaoTiYuan;
					color: #3982a5;
					line-height: 36rpx;
					margin: 16rpx 32rpx 28rpx;

					.span32 {
						margin-left: 32rpx;
					}

					.span22 {
						margin-left: 22rpx;
					}
				}
			}

			.top-bg {
				width: 750rpx;
			}

			.top-center-bg {
				margin: 62rpx 54rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(2, 1fr);
				grid-column-gap: 48rpx;
				grid-row-gap: 64rpx;
			}

			.center-bg {
				margin: 62rpx 0;
			}

			.seat-box {
				width: 182rpx;
				height: 130rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				position: relative;

				.aisle {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 46rpx;
					height: 130rpx;
					background: #ffffff;
					border-radius: 6rpx;
					box-sizing: border-box;
					border: 2rpx solid #3982a5;
				}

				.image-box {
					height: calc(100% /3);
					width: 50%;
					display: flex;
					position: relative;

					.seat-index {
						font-size: 28rpx;
						color: #3982a5;
						transform: rotate(90deg);
						height: 28rpx;
						line-height: 28rpx;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}

					.seat-index-reversal {
						font-size: 28rpx;
						color: #3982a5;
						transform: rotate(270deg);
						height: 28rpx;
						line-height: 28rpx;
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}

					.seat-image {
						width: 30rpx;
						height: 34rpx;
						position: absolute;
						left: 32rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}

					.seat-image-reversal {
						transform-origin: center;
						transform: rotate(180deg);
						width: 30rpx;
						height: 34rpx;
						position: absolute;
						right: 32rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
			}

			// width: 686rpx;
			// box-shadow: 0rpx 4rpx 12rpx 0rpx #97c8dc, inset 0rpx 6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 0rpx -6rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset -6rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
			// border-radius: 24rpx;
			// border-image: linear-gradient(180deg, #d3f1ff, #91c8e2) 2 2;
			// -webkit-backdrop-filter: blur(16px);
			// backdrop-filter: blur(16px);
			// box-sizing: border-box;
			// margin: 16rpx auto 28rpx;
			// overflow: hidden;
			// position: relative;

			.title {
				border-bottom: 2rpx solid rgba(2, 21, 30, 0.06);
				font-size: 32rpx;
				font-family: YouSheBiaoTiYuan;
				color: #004362;
				height: 74rpx;
				line-height: 74rpx;
				padding-left: 32rpx;
			}

			.book-text {
				margin: 64rpx 0rpx 88rpx 30rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #04496a;
				line-height: 32rpx;
			}

			.success-right {
				width: 120rpx;
				height: 174rpx;
				position: absolute;
				top: 56rpx;
				right: 34rpx;
			}

			.center {
				display: flex;
				justify-content: space-between;
				margin: auto 48rpx;

				.time {
					height: 78rpx;
					font-size: 60rpx;
					color: #004362;
					line-height: 78rpx;
				}

				.time-bg {
					width: 126rpx;
					height: 32rpx;
					// background: url(/static/index/time-bg.png) no-repeat;
					background-size: 100% 100%;
					text-align: center;
					font-size: 20rpx;
					font-weight: 500;
					color: #04496a;
					line-height: 32rpx;
					margin: auto;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				margin: 12rpx 72rpx;
				text-align: center;

				.bottom-title {
					height: 20rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #3982a5;
					line-height: 20rpx;
				}

				.bottom-text {
					height: 42rpx;
					font-size: 32rpx;
					font-family: YouSheBiaoTiYuan;
					color: #04496a;
					line-height: 42rpx;
				}

				.bottom-icon-box {
					display: flex;
					justify-content: center;

					.image {
						width: 34rpx;
						height: 32rpx;
						margin: 5rpx 6rpx;
					}
				}
			}

			.tips-box {
				margin: 44rpx;
				overflow: hidden;

				.text {
					width: 598rpx;
					font-size: 28rpx;
					color: #004362;
					line-height: 48rpx;
				}
			}

			.button-box {
				display: flex;
				width: 580rpx;
				height: 88rpx;
				justify-content: space-between;
				margin: 106rpx auto 32rpx;

				.left {
					width: 280rpx;
					border-radius: 48rpx;
					border: 2rpx solid #004362;
					font-size: 32rpx;
					font-weight: 500;
					color: #004362;
					line-height: 88rpx;
					text-align: center;
				}
			}

			.button {
				width: 580rpx;
				height: 88rpx;
				border-radius: 48rpx;
				border: 2rpx solid #cc5445;
				font-size: 32rpx;
				font-weight: 500;
				color: #cc5445;
				line-height: 88rpx;
				text-align: center;
				margin: 32rpx auto 54rpx;
			}

			.step-box {
				padding: 30rpx 40rpx;
			}
		}

		.index-bg {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			// filter: blur(3px);
		}






		.content-box {
			width: 714rpx;
			height: 252rpx;
			background-size: 100% 100%;
			margin: 0 -14rpx;
			position: relative;

			.top-right-box {
				position: absolute;
				top: 38rpx;
				right: 56rpx;
				display: flex;

				.text {
					width: 86rpx;
					height: 28rpx;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 28rpx;
				}

				.image {
					width: 24rpx;
					height: 24rpx;
					display: flex;
					margin: auto 0 auto 8rpx;
				}
			}

			.item {
				.top {
					padding: 32rpx 44rpx 44rpx;
					height: 32rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #004362;
					line-height: 32rpx;
				}
			}

			.bottom {
				width: 598rpx;
				margin: 18rpx auto auto;
				height: 18rpx;
				background: rgba(214, 230, 235, 0.4);
				border-radius: 6rpx;
				position: relative;
				border-image: linear-gradient(180deg, rgba(186, 233, 255, 1), rgba(115, 177, 206, 1)) 2 2;
				box-sizing: border-box;
				border: 2rpx solid rgba(115, 177, 206, 0.8);

				.bottom-item {
					position: absolute;
					height: 10rpx;
					left: 1rpx;
					top: 1rpx;
					border-radius: 6rpx;
					background-color: #3982a5;
				}
			}

			.center {
				display: flex;
				justify-content: space-between;
				margin: 0 64rpx;

				.center-item {
					width: 30%;
					text-align: center;

					.item-title {
						height: 20rpx;
						font-size: 20rpx;
						font-weight: 500;
						color: #3982a5;
						line-height: 20rpx;
					}

					.item-text {
						height: 42rpx;
						font-size: 32rpx;
						font-family: YouSheBiaoTiYuan;
						color: #04496a;
						line-height: 42rpx;
					}
				}
			}
		}
	}
</style>